import React from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components/native';
import { MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons';
import Touchable from '@appandflow/touchable';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import { graphql, compose } from 'react-apollo';
import Placeholder from 'rn-placeholder';

import { defaultAvatar, dimens, colors } from '../../utils/constants';
import { toLoginScreen } from '../../actions/user';
import FAVOURITE_TWEET_MUTATION from '../../graphql/mutations/favouriteTweet';

const HEADER_SIZE = 50;
const AVATAR_SIZE = 42;
const AVATAR_RIDUS = AVATAR_SIZE / 2;
const ACTION_ICON_SIZE = 16;

const Root = styled.View`
  width: 100%;
  min-height: 100;
  display: flex;
  background-color: ${props => props.theme.WHITE};
  border-color: ${props => props.theme.SHADOW};
  border-top-width: 1px;
  border-bottom-width: 1px;
  shadow-color: ${props => props.theme.SHADOW};
  shadow-offset: 0px 1px;
  shadow-radius: 1.5;
  shadow-opacity: 1;
  margin: 5px 0 5px 0;
`;

const Header = styled.View`
  height: ${HEADER_SIZE};
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: ${dimens.MARGIN};
`;

const Avatar = styled.Image`
  width: ${AVATAR_SIZE};
  height: ${AVATAR_SIZE};
  border-radius: ${AVATAR_RIDUS};
`;

const MetaContent = styled.View`
  flex: 1;
  align-self: stretch;
  margin: 0 ${dimens.MARGIN} 0 ${dimens.MARGIN};
`;

const MetaTopContainer = styled.View`
  flex: 1;
  flex-direction: row;
  align-items: center;
`;

const MetaBottomContainer = styled.View`
  flex: 1;
  flex-direction: row;
  align-items: center;
`;

const MetaFullname = styled.Text`
  font-size: 16;
  color: ${props => props.theme.ACCENT}
`;

const MetaInfos = styled.Text`
  font-size: 14;
  color: ${props => props.theme.SECONDARY_TEXT};
`;

const WeiboContent = styled.View`
  min-height: 48;
  margin: 0 ${dimens.MARGIN} ${dimens.MARGIN} ${dimens.MARGIN};
`;

const WeiboText = styled.Text`
  font-size: 16;
  color: ${props => props.theme.PRIMARY_TEXT};
`;

const ActionContainer = styled.View`
  width: 100%;
  height: 40;
  flex-direction: row;
`;

const Hr = styled.View`
  height: 1;
  background-color: ${colors.HR};
  margin: 0 ${dimens.MARGIN} 0 ${dimens.MARGIN};
`;

const ActionButton = styled(Touchable).attrs({
  feedback: 'opacity'
})`
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`;

const ActionButtonText = styled.Text`
  font-size: 15;
  color: ${props => props.favourite ? props.theme.FAVOURITE : props.theme.PRIMARY_TEXT_LITE};
  margin-left: 5;
`;

const Wrapper = styled.View`
  flex: 1;
  min-height: 200;
`;

// const createAt = '昨天 19:11 来自 微博 weibo.com';

class FeedCard extends React.Component {

  _favouriteTweet = () => {
    const { isAuthenticated, favourite, toLoginScreen } = this.props;
    if (isAuthenticated) {
      favourite();
    } else {
      toLoginScreen();
    }
  }

  render() {
    const {
      text,
      createdAt,
      favouriteCount,
      isFavourite = false,
      user,
      isLoaded,
      placeholder
    } = this.props;

    if (placeholder) {
      return (
        <Root>
          <Placeholder.ImageContent
            onReady={!isLoaded}
            size={HEADER_SIZE}
            lineNumber={2}
            lineSpacing={10}
            textSize={14}
            animate="shine"
            lastLineWidth="40%"
          >
            <Wrapper />
          </Placeholder.ImageContent>
        </Root>
      );
    }
    return (
      <Root>
        <Header>
          <Avatar source={{ uri: user.avatar || defaultAvatar }} />
          <MetaContent>
            <MetaTopContainer>
              <MetaFullname>{user.username}</MetaFullname>
            </MetaTopContainer>
            <MetaBottomContainer>
              <MetaInfos>{distanceInWordsToNow(createdAt)} ago</MetaInfos>
            </MetaBottomContainer>
          </MetaContent>
          <SimpleLineIcons name="arrow-down" size={14} color={colors.PRIMARY_TEXT_LITE} />
        </Header>
        <WeiboContent>
          <WeiboText>{text}</WeiboText>
        </WeiboContent>
        <Hr />
        <ActionContainer>
          <ActionButton>
            <SimpleLineIcons name="share-alt" size={ACTION_ICON_SIZE} color={colors.PRIMARY_TEXT_LITE} />
            <ActionButtonText>转发</ActionButtonText>
          </ActionButton>
          <ActionButton>
            <SimpleLineIcons name="speech" size={ACTION_ICON_SIZE} color={colors.PRIMARY_TEXT_LITE} />
            <ActionButtonText>评论</ActionButtonText>
          </ActionButton>
          <ActionButton onPress={this._favouriteTweet}>
            {
              isFavourite ?
              <MaterialCommunityIcons name="thumb-up" size={17}
                  color={isFavourite ? colors.FAVOURITE : colors.PRIMARY_TEXT_LITE} /> :
              <MaterialCommunityIcons name="thumb-up-outline" size={17}
                  color={isFavourite ? colors.FAVOURITE : colors.PRIMARY_TEXT_LITE} />
            }
            <ActionButtonText favourite={isFavourite}>{favouriteCount > 0 ? favouriteCount : '赞'}</ActionButtonText>
          </ActionButton>
        </ActionContainer>
      </Root>
    );
  }
}

const mapStateToProps = state => ({
  isAuthenticated: state.user.isAuthenticated
})

export default compose(
  graphql(FAVOURITE_TWEET_MUTATION, {
    props: ({ ownProps, mutate }) => ({
      favourite: () => mutate({
        variables: { _id: ownProps._id },
        optimisticResponse: {
          __typename: 'Mutation',
          favouriteTweet: {
            __typename: 'Tweet',
            _id: ownProps._id,
            favouriteCount: ownProps.isFavourite ? ownProps.favouriteCount - 1 : ownProps.favouriteCount + 1,
            isFavourite: !ownProps.isFavourite
          }
        }
      })
    })
  }),
  connect(mapStateToProps, { toLoginScreen })
)(FeedCard);
